<template>
	<view class="content">
		<u-form :model="formData" ref="uForm" label-align="center" :label-style="labelStyle" :error-type="errorType"
			label-width=180>
			<u-form-item label="照片">
				<uni-file-picker ref="avatar" :auto-upload="false" file-mediatype="image" limit="1" v-model="avatar"
					:sizeType="['compressed']" @select="selectFile"></uni-file-picker>
			</u-form-item>
			<view class="form-tips">
				为确保显示效果，照片宽高比建议大约为1:1.5
			</view>
			<block v-if="!id">
				<u-form-item prop="username" label="登录账号" required>
					<u-input type="text" confirmType="next" placeholder=" " v-model="formData.username" trim
						:custom-style="styles" :placeholderStyle="placeholderStyle" />
				</u-form-item>
				<u-form-item v-if="" prop="password" label="密码">
					<u-input type="text" confirmType="next" placeholder=" " v-model="formData.password" trim
						:custom-style="styles" :placeholderStyle="placeholderStyle" />
					<view class="form-tips">默认234567</view>
				</u-form-item>
			</block>
			<block v-else>
				<u-form-item prop="username" label="登录账号">
					{{ formData.username }}
				</u-form-item>
			</block>
			<u-form-item prop="nickname" label="姓名" required>
				<u-input type="text" confirmType="next" placeholder=" " v-model="formData.nickname" trim
					:custom-style="styles" :placeholderStyle="placeholderStyle" />
			</u-form-item>
			<u-form-item prop="mobile" label="联系方式">
				<u-input type="text" confirmType="next" placeholder=" " v-model="formData.mobile" trim
					:custom-style="styles" :placeholderStyle="placeholderStyle" />
			</u-form-item>
			<u-form-item prop="address" label="常驻地点">
				<u-input type="text" confirmType="next" placeholder=" " v-model="formData.address" trim
					:custom-style="styles" :placeholderStyle="placeholderStyle" />
			</u-form-item>
			<u-form-item prop="employee_card" label="工作证号">
				<u-input type="text" confirmType="next" placeholder=" " v-model="formData.employee_card" trim
					:custom-style="styles" :placeholderStyle="placeholderStyle" />
			</u-form-item>
			<u-form-item prop="worktime" label="值班时间">
				<u-input type="text" confirmType="next" placeholder=" " v-model="formData.worktime" trim
					:custom-style="styles" :placeholderStyle="placeholderStyle" />
			</u-form-item>
			<u-form-item prop="worktype" label="在职状态">
				<u-radio-group v-model="formData.worktype" @change="changeWorktype">
					<u-radio v-for="(item, index) in worktypeOptions" :key="index" :name="item.text">
						{{item.text}}
					</u-radio>
				</u-radio-group>
			</u-form-item>
			
			<u-form-item prop="sex" label="性别">
				<u-radio-group v-model="formData.sex" @change="changeSex">
					<u-radio v-for="(item, index) in gander" :key="index" :name="item.text">
						{{item.text}}
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item prop="nation" label="民族">
				<u-input type="text" confirmType="next" placeholder=" " v-model="formData.nation" trim
					:custom-style="styles" :placeholderStyle="placeholderStyle" />
			</u-form-item>
			<u-form-item prop="age" label="年龄">
				<u-input type="text" confirmType="next" placeholder=" " v-model="formData.age" trim
					:custom-style="styles" :placeholderStyle="placeholderStyle" />
			</u-form-item>
			<u-form-item prop="job" label="职业或职务">
				<u-input type="text" confirmType="next" placeholder=" " v-model="formData.job" trim
					:custom-style="styles" :placeholderStyle="placeholderStyle" />
			</u-form-item>
			<u-form-item prop="field" label="擅长领域">
				<u-input type="text" confirmType="next" placeholder=" " v-model="formData.field" trim
					:custom-style="styles" :placeholderStyle="placeholderStyle" />
			</u-form-item>
			<u-form-item prop="comment" label="简介" class="form-item-top" label-align="left" label-position="top">
				<u-input type="textarea" confirmType="done" height="200" placeholder=" " v-model="formData.comment"
					maxlength="2048" trim :custom-style="styles" :placeholderStyle="placeholderStyle" />
			</u-form-item>
			<u-form-item prop="group" label="类型">
				<u-checkbox-group @change="changeGroup">
					<u-checkbox v-model="item.checked" v-for="(item, index) in groupList" :key="index"
						:name="item.value">{{item.name}}</u-checkbox>
				</u-checkbox-group>
			</u-form-item>
			<!-- <u-form-item prop="is_index" label="首页显示">
				<u-switch v-model="formData.is_index"></u-switch>
			</u-form-item> -->
			<u-form-item prop="caseSuccess" label="案例成功数">
				<u-input type="text" confirmType="next" placeholder=" " v-model="formData.caseSuccess" trim
					:custom-style="styles" :placeholderStyle="placeholderStyle" />
			</u-form-item>
			<u-form-item prop="caseTotal" label="案例总数">
				<u-input type="text" confirmType="next" placeholder=" " v-model="formData.caseTotal" trim
					:custom-style="styles" :placeholderStyle="placeholderStyle" />
			</u-form-item>
		</u-form>
		
		<view class="bottom-bar" v-if="id">
			<u-button class="bottom" type="primary" :disabled="disabled" :loading="loading" @click="submit">保存</u-button>
			<u-button class="bottom" type="error" :disabled="disabled" :loading="loading"
				@click="del">删除</u-button>
		</view>
		<u-button v-else class="bottom" type="primary" :disabled="disabled" :loading="loading" @click="submit">保存</u-button>
		
	</view>
</template>

<script>
	let gander = [{
		"text": "未知"
	}, {
		"text": "男"
	}, {
		"text": "女"
	}]
	export default {
		data() {
			let formData = {
				username: '',
				nickname: '',
				employee_card: '',
				worktime: '',
				worktype: '',
				sex: '',
				nation: '',
				age: '',
				job: '',
				field: '',
				mobile: '',
				address: '',
				comment: '',
				avatar: '',
				group: [0], // 分组，0普通，1专家
				caseSuccess: 0,
				caseTotal: 0,
			};
			// 页面数据变量
			return {
				id: '',
				disabled: false,
				loading: false,

				gander,
				avatar: [],
				
				worktypeOptions: [{
					"text": "专职"
				}, {
					"text": "兼职"
				}],

				groupList: [{
					value: 0,
					name: '人民调解员',
					checked: true
				}, {
					value: 1,
					name: '特邀专家'
				}],

				formData,

				rules: {
					"username": [{
						required: true,
						message: '请输入登录账号',
						trigger: 'blur',
					}],
					"nickname": [{
						required: true,
						message: '请输入姓名',
						trigger: 'blur',
					}],
					// "mobile": [{
					// 	required: true,
					// 	message: '请输入联系方式',
					// 	trigger: 'blur',
					// }]
				},
				placeholderStyle: this.$css.placeholderStyle,
				styles: this.$css.styles,
				errorType: this.$css.errorType,
				labelStyle: this.$css.labelStyle,
			}
		},
		onLoad(options) {
			this.init(options);
		},
		onReady() {
			if (this.$refs.uForm) this.$refs.uForm.setRules(this.rules);
		},
		// 函数
		methods: {
			// 页面数据初始化函数
			init(options = {}) {
				this.id = options.id;
				if (this.id) this.getData();
				if (!this.formData.sex) this.formData.sex = gander[0].text;
				if (!this.formData.worktype) this.formData.worktype = this.worktypeOptions[1].text;
			},
			getData() {
				vk.callFunction({
					url: this.$api.Admin_EmployeeInfo,
					loading: true,
					data: {
						_id: this.id
					},
					success: (res) => {
						this.formData = res.item;
						this.avatar = this.formData.avatarFile
						if (!this.formData.sex) this.formData.sex = gander[0].text;
						if (!this.formData.worktype) this.formData.worktype = this.worktypeOptions[1].text;

						if (this.formData.group) {
							this.groupList[0].checked = false;
							this.formData.group.forEach(item => {
								this.groupList.find(item1 => item1.value == item).checked = true
							})
						} else {
							this.formData.group = [0]
						}
					}
				})
			},
			pageTo(path) {
				vk.navigateTo(path);
			},
			changeSex(e) {
				this.formData.sex = e
			},
			changeWorktype(e) {
				this.formData.worktype = e
			},
			changeGroup(e) {
				this.formData.group = e;
			},
			submit() {
				// console.log('avatar', this.avatar);
				if (vk.pubfn.isNotNull(this.avatar)) {
					this.formData.avatarFile = this.avatar
					this.formData.avatar = this.avatar[0].url;
				}
				// console.log('this.formData', this.formData);

				this.disabled = true;
				this.loading = true;
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.submitForm();
					} else {
						this.disabled = false;
						this.loading = false;
					}
				})
			},
			// 提交
			submitForm() {
				this.formData.login_appid_type = 0;
				this.formData.role = ['tiaojie_employee'];
				
				if(!this.formData.caseSuccess) this.formData.caseSuccess = 0;
				if(!this.formData.caseTotal) this.formData.caseTotal = 0;

				let url = this.id ? this.$api.Admin_EditEmployee : this.$api.Admin_AddEmployee;

				vk.callFunction({
					url,
					loading: true,
					data: {
						...this.formData
					},
					success: (res) => {
						vk.toast('保存成功');
						setTimeout(() => {
							vk.reLaunch('./list');
						}, 1000);
					},
					complete: () => {
						this.disabled = false;
						this.loading = false;
					}
				})
			},
			// 删除
			del() {
				vk.confirm("删除后信息无法找回，仍然要删除吗？", "警告", "确定", "取消", (res) => {
					if (res.confirm) {
						// 点击确定按钮后的回调
						let url = this.$api.Admin_EditEmployee;

						vk.callFunction({
							url,
							loading: true,
							data: {
								_id: this.id,
								status: 1,
							},
							success: (res) => {
								vk.toast('删除成功，账号已禁用');
								setTimeout(() => {
									vk.reLaunch('./list');
								}, 1000);
							},
							complete: () => {
								this.disabled = false;
								this.loading = false;
							}
						})
					}
				});
			},
			selectFile(e) {
				let file = e.tempFiles[0];
				if (file.size > 5 * 1024 * 1024) {
					vk.alert('文件大小不得超过5M');
					this.$refs.avatar.clearFiles();
					return false;
				} else {
					this.$refs.avatar.upload();
				}
			},
		}
	}
</script>